<template>
    <div>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="left" label-width="100px">
        <el-row :gutter="24" align="middle">
          <el-col :span="8">
            <el-form-item label="版本名称" prop="name">
              <el-input
                style="width: 100%;"
                v-model="formData.name"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="启用时间" prop="executeDate">
              <el-date-picker
                style="width: 100%;"
                v-model="formData.year"
                type="year"
                value-format="yyyy"
                placeholder="请选择时间"
                class="calendar-single"
                :editable="false"
                :clearable="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item >
              <el-button
                  size="small"
                  type="primary"
                  @click="addInput" 
                  icon="el-icon-plus"
                  >新增</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="top">
        <el-row :gutter="24" align="middle">
          <div v-for="(item, index) in inputList" :key="index">
              <el-col :span="24" >
                  <el-form-item :label="'店铺' + (index + 1)+'信息'" required>
                      <div style="display: flex; gap: 8px;">
                          <div style="display: flex;">
                              <div style="width: 84px;">编号：</div>
                              <el-input
                                  v-model="item.code"
                                  placeholder="请输入"
                                  clearable
                                  style="width: 100%"
                              />
                          </div>
                          <div style="display: flex;">
                              <div style="width: 84px;">面积(㎡)：</div>
                              <el-input
                                  v-model="item.area"
                                  placeholder="请输入"
                                  clearable
                                  style="width: 100%"
                              />
                          </div>
                          <div style="display: flex;">
                              <div style="width: 84px;">状态：</div>
                              <div style="width: 84px;">{{ item.statusName }}</div>
                          </div>
                          <el-button type="text" v-if="item.status == 1" @click="stopRow(item)">停租</el-button>
                          <el-button type="text" v-else="item.status == 0" @click="startRow(item)">出租</el-button>
                          <el-button type="text" @click="removeInput(index)" v-if="inputList.length > 1">删除</el-button>
                      </div>
                  </el-form-item>
              </el-col>
            </div>
        </el-row>
      </el-form>
    </div>
</template>
<script>
  import dayjs from "dayjs";
  import { 
      addEntryColdInfo,
      updateEntryColdInfo,
      getDistributionInfo
  } from "@/api/entryManage";
  export default {
      name: "FormModal",
      props: {
          title: String,
          rowData: Object
      },
      data() {
          return {
              inputList: [
                {
                    id: '',
                    code: '',
                    area: '',
                    status: 1,
                    statusName: '已租', // 已租 未租
                }
            ],
              formData:{
                  projectId:this.$store.state.projectId,
                  name:this.$props.rowData?.name || null,
                  year:this.$props.rowData?.year || dayjs().format('YYYY'),
              },
              rules:{
                  name: [
                      { required: true, message: "请输入版本名称", trigger: "blur" }
                  ],
                  year: [
                      { required: true, message: "请选择启用时间", trigger: "change" }
                  ],
              }
          }
      },
      created(){
          this.initSetModal()
      },
      methods:{
          stopRow(item) {
            item.status = 0
            item.statusName = '未租'
          },
          startRow(item) {
            item.status = 1
            item.statusName = '已租'
          },
          addInput() {
            this.inputList.push({
                  id: '',
                  code: '',
                  area: '',
                  status: 1,
                  statusName: '已租', // 已租 未租
                })
          },
          removeInput(index) {
              this.inputList.splice(index, 1)
          },
          initSetModal() {
              if (this.$props.rowData) {
                  this.$emit("SetTitle", "编辑");
              } else {
                  this.$emit("SetTitle", "新增");
              }
              this.$emit("SetPageWidth", 1200);
              this.$emit("SetPageActions", [
                  {
                      text: "取消",
                      theme: "info",
                      handle: () => {
                          this.$emit("Close");
                      }
                  },
                  {
                      text: "保存",
                      theme: "primary",
                      handle: () => {
                          this.submitForm();
                      },
                      loading: false
                  }
              ]);
          },
          submitForm() {
              this.$refs.ruleForm.validate(valid => {
                  if (valid) {
                  //验证成功,发送请求
                  if (this.$props.rowData) {
                      //编辑更新
                      this.sendUpdateRequestFun();
                  } else {
                      //新增
                      this.sendAddRequestFun();
                  }
                  } else {
                  //验证失败
                  }
              });
          },
          sendAddRequestFun() {
                  addEntryColdInfo({
                  ...this.formData
              }).then(result => {
                  if (result.code == 200) {
                      this.$message.success(result.msg);
                      this.$emit("Close", true);
                  }
              }).catch((err) => {
                  this.$message.error(err)
              })
          },
          sendUpdateRequestFun() {
              const params={
                  ...this.formData,
                  id: this.$props.rowData?.id
              }
                  updateEntryColdInfo(params).then(result => {
                  if (result.code == 200) {
                      this.$message.success(result.msg);
                      this.$emit("Close", true);
                  }
              }).catch((err) => {
                  this.$message.error(err)
              })
          },
      }
  }
</script>


<style lang="scss" scoped>
.calendar-single ::v-deep.el-icon-date:before {
  content: '' !important;
}
.calendar-single ::v-deep.el-input__suffix {
  width: 25px !important;
}
.calendar-single ::v-deep i:last-child {
  background: url('~@/assets/image/operation/calendar.svg') center center no-repeat !important;
  background-size: 18px 18px !important;
}
.calendar-single ::v-deep.el-range-separator {
  line-height: 28px !important;
}
.opr-btn-stop {
    margin-left: 0;
    margin-right: 16px;
    color: #A8A8A8;
}
.opr-btn-edit {
    margin-left: 0;
    margin-right: 16px;
    color: #00FFFF;
}
.opr-btn-delete {
    margin-left: 0;
    margin-right: 16px;
    color: #FF2E00;
}
.opr-btn-save {
    margin-left: 0;
    margin-right: 16px;
    color: #dc7500;
}
.opr-btn-cancel {
    margin-left: 0;
    margin-right: 16px;
    color: #A8A8A8;
}
</style>
